<template>
    <div class="nav-bar-box">
        <van-nav-bar>
            <template #left>
            <span class="nav-left" style="color:#323232;display: flex;align-items: center">
              <router-link style="color:#333333"  to="/"><i class="fas fa-home"></i></router-link>
              <span class="van-ellipsis" style="margin-left:10px; width: 200px;text-align: left">{{title}}</span>
            </span>
            </template>
            <template #right>
                <div class="nav-right" style="color:#323232;">
                    <span @click="goBack">返回</span>
                    <template v-if="pathName=='detail'">
                        <span style="margin: 0px 10px;">|</span><span @click="guideShow=!guideShow">分享</span>
                    </template>
                </div>
            </template>
        </van-nav-bar>
        <div class="guide" v-if="guideShow" @click="guideShow=!guideShow">
            <img src="/static/images/yd.png" alt="">
        </div>


    </div>

</template>

<script>

    export default {
        name: "navbar",
        model: {
            prop: 'visible',
            event: 'change'
        },
        components:{
        },
        props: {
            visible: Boolean,
            pathName:String,
            title:String

        },
        data() {
            return {
                showCustomer: false,
                showShare:false,
                guideShow:false,
                options: [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '腾讯微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                ],
            };
        },
        watch: {
            pathName(newName, oldName) {
                if(newName=='detail'){

                }
            }
        },
        created(){

        },

        methods: {
            onSelect(option) {


            },
            goBack(){
                this.$router.go(-1)
            }

        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .guide{
        position: fixed;
        top:0px;
        left:0px;
        width: 100%;
        height: 100vh;
        background-color: #000;
        opacity: 0.9;
        z-index:10000000;
        img{
            width: 100%;
            /*height: 100%;*/
            object-fit: cover;
        }
    }
    .right-menu{
        position: fixed;
        right:10px;
        top:50%;
        transform: translateY(-50%);
        z-index:10000;
        .item-box{
            padding:5px;
            overflow: hidden;
            background: #ffffff;
            color: #1AA97B;
            box-shadow: 0 0 0.1rem rgb(0 0 0 / 30%);
            border-radius: 50%;
            &:first-child{
                margin-bottom:10px;
            }
            font-size:0px;
            img{
                width: 30px;
                height: 30px;
            }
        }
    }
    .seek{
        position: fixed;
        max-width: 640px;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.66);
        z-index: 99999;

        p{
            margin:0px 0px;
            padding: 0px 0px;
        }
        .customercurpon {
            border-radius: .2rem;
            width: 6rem;
            height: 8rem;
            position: relative;
            z-index: 999;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #1AA97B!important;
        }

        .customercurpon .tubiaos{
            width: 2.5rem;
            height: 2.5rem;
            position: absolute;
            top: -0.58rem;
            left: 1.75rem;
            background: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 80%;
                height: 80%;
            }
        }
        .customercurpon .bgs {
            position: absolute;
            height: 5.8rem;
            top: 2.2rem;
            font-weight: 600;
            width: 100%;
            border-bottom-left-radius: .2rem;
            border-bottom-right-radius: .2rem;
            color: #1AA97B;
            background-color: #fff;
        }
        .customercurpon .my-kefu2 {
            font-size: 2.5rem!important;
            color: #fff!important;
            font-weight: 500;
        }
        .customercurpon .person {
            position: absolute;
            top: 0.25rem;
            font-size: .48rem;
            color: #333;
            font-weight: 600;
            width: 100%;
        }
        .customercurpon .person2 {
            position: absolute;
            top: 1rem;
            font-size: .38rem;
            width: 90%;
            left: 5%;
            font-weight: 500;
            line-height: 1.2;
        }
        .customercurpon .canvas {
            bottom: 1.5rem;
            width: 2.5rem;
            height: 2.5rem;
            position: absolute;
            left: 1.75rem;
        }
        .customercurpon img {
            width: 100%;
        }
        .customercurpon .person3 {
            position: absolute;
            bottom: .4rem;
            font-size: .38rem;
            width: 90%;
            left: 5%;
            font-weight: 500;
            color: #333;
        }
        .customercurpon .close {
            width: 0.6rem;
            height: 0.6rem;
            position: absolute;
            bottom: -1rem;
            left: 2.7rem;
        }

    }
</style>
